<template>
	<slot
		:controller="controller"
		:store="store"
		:model="model"
		:actions="{
			handleItemClick,
			handleItemDbClick,
			handleSelectionChange,
			handleLoadMore,
			handleActionClick,
		}"
	>
		<div :class="classNames" :id="controlID">
			<div class="control-header app-dataview__header"></div>
			<AppDataView
				v-bind="$attrs"
				class="control-content app-dataview__content"
				:items="store.data"
				:cardOpts="model.cardLayout"
				:totalRecord="store.totalRecord"
				:selections="store.selections"
				@item-click="handleItemClick"
				@item-db-click="handleItemDbClick"
				@selection-change="handleSelectionChange"
				@load-more="handleLoadMore"
				@item-action-click="(logic: any, data: IParam, event: MouseEvent) => handleActionClick(controller, logic, data, event)"
			>
			</AppDataView>
		</div>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@DATAVIEW}}-data-view/{{spinalCase ctrl.codeName}}-data-view-base.vue.hbs生成
import { AppDataView } from '@components/widgets/data-view';
import {
	useProps,
	useBasic,
	useAction,
	useController,
} from './form-type-data-view-hook';
import {
	DataViewCtrlActionType,
	IDataViewCtrlAbility,
	IDataViewCtrlStore,
	IParam,
	IViewLogicInput,
} from '@/core/interface';

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: DataViewCtrlActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: IDataViewCtrlAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  部件样式名
const classNames = computed(() => {
	return getClassNames(props);
});

//  卡片部件控制器
const controller = useController(props, evt, { controlID });

useNavParamsBind(controller, props);

const store: IDataViewCtrlStore = controller.getStore();

const {
	handleItemClick,
	handleItemDbClick,
	handleSelectionChange,
	handleLoadMore,
} = useAction(controller);

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
</script>
